<template>
  <div class="OutingMutabl">
    <a-table
      :row-selection="rowSelection"
      :columns="columns"
      :data-source="data"
      :scroll="{ x: 'calc(700px + 50%)' }"
      :pagination="false"
    >
      <span slot="name" slot-scope="text">{{ text }}</span>
      <span slot="action" slot-scope="text, record">
        <a @click="handleReview(record)">查看</a>
        <a @click="handleEdit(record)" v-has="record.isDirector ? 'Force' : 'Volunteer:edit'" style="margin-left: 10px"
          >编辑</a
        >
        <a-popconfirm
          v-has="record.isDirector ? 'Force' : 'Volunteer:delete'"
          style="margin-left: 10px"
          title="确定删除?"
          @confirm="() => handleDelete(record.id)"
        >
          <a>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <a-pagination v-model="current" :total="total" show-less-items @change="getpage" />
    <OutingFromtows :visible="visible" @handlevisible="handlevisible" :id="id" :num="num" @searchQuery="searchQuery" />
  </div>
</template>

<script>
import moment from 'moment'
import { setoutsideList, setoutside, setoutsideByid } from '../../../api/api'
import OutingFromtows from './OutingFromtows'
import { deleteAction } from '@/api/manage'
const columns = [
  {
    title: '申请部门',
    dataIndex: 'departName',
    align: 'center',
    width: 160,
    scopedSlots: { customRender: 'departName' },
  },
  {
    title: '负责人',
    align: 'center',
    width: 100,
    dataIndex: 'director',
  },
  {
    title: '负责人电话',
    align: 'center',
    width: 150,
    dataIndex: 'directorPhone',
  },
  {
    title: '指导老师',
    align: 'center',
    width: 150,
    dataIndex: 'instructor',
  },

  {
    title: '指导老师电话',
    align: 'center',
    width: 150,
    dataIndex: 'instructorPhone',
  },

  {
    title: '活动开始时间',
    align: 'center',
    width: 150,
    dataIndex: 'activityDateStart',
  },
  { title: '活动结束时间', align: 'center', dataIndex: 'activityDateEnd', width: 150 },
  {
    title: '出行方式',
    align: 'center',
    width: 150,
    dataIndex: 'tripMode',
  },
  {
    title: '外出事由',
    align: 'center',
    width: 150,
    dataIndex: 'reason',
  },
  {
    title: '审核状态',
    align: 'center',
    width: 150,
    dataIndex: 'actStatus_dictText',
  },
  {
    title: '申请时间',
    align: 'center',
    width: 150,
    dataIndex: 'createTime',
  },
  {
    title: '操作',
    align: 'center',
    // dataIndex: 'action',
    fixed: 'right',
    width: 250,
    scopedSlots: { customRender: 'action' },
  },
]

const data = [
  {
    key: '1',
    departName: '',
    director: '',
    directorPhone: '',
    instructorPhone: '',
    instructor: '',
    tripMode: '',
    reason: '',
    activityDateStart: '',
    activityDateEnd: '',
    actStatus_MultiString: '',
    createTime: '',
  },
]

export default {
  name: 'OutingMutabl',
  components: { OutingFromtows },
  data() {
    return {
      id: '',
      num: 1,
      visible: false,
      current: 1,
      page: '1',
      pageSize: '10',
      actStatus_MultiString: '-1,0,1',
      moment,
      data,
      columns,
      url: {
        delete: '/outsideActivity/delete',
        batchdelete: '/outsideActivity/deleteBatch',
      },
      total: null,
      // departName: '', // 申请的部门
      // director: '', // 负责人名字
      // createTime: '', // 创建时间
      // directorPhone: '', // 负责人电话
      // instructor: '', // 指导老师
      // instructorPhone: '', // 指导老师电话
      // activityDateStart: '', // 活动开始时间
      // activityDateEnd: '', // 活动结束时间
      // service: '', // 外出事由
      // tripMode: '', // 出行方式
      // remark: '', // 备注
      // activityAddress: '', // 活动地点（详细）
      // activityPerson: '', //参与活动人数
      // activityName: '', // 活动名称
      // actStatus_dictText: '', // 审核状态
      // id: '',
      arrRows: [],
    }
  },
  created() {
    this.searchQuery()
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.arrRows = []
          // console.log(`索引: ${selectedRowKeys}`, '数组: ', selectedRows)
          for (let i = 0; i < selectedRows.length; i++) {
            if (this.arrRows.indexOf(selectedRows[i].id) === -1) {
              this.arrRows.push(selectedRows[i].id)
            }
          }
          this.$emit('showdel', this.arrRows)
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      }
    },
  },
  methods: {
    Inbatches() {
      deleteAction(this.url.batchdelete, { ids: this.arrRows.toString() }).then((res) => {
        this.searchQuery()
      })
    },
    searchQuery(page, pageSize, director, directorId) {
      setoutsideList({
        pageNo: page,
        pageSize: pageSize || this.pageSize,
        director: director,
        directorId: directorId,
        actStatus_MultiString: this.actStatus_MultiString,
      }).then((res) => {
        ;(this.total = res.result.total), (this.totalCount = res.result.total), (this.data = res.result.records)
      })
    },
    getpage(page, pageSize) {
      // console.log(page, pageSize);
      this.page = page
      this.pageSize = pageSize
      this.searchQuery(this.page, this.pageSize)
    },
    // 删除逻辑
    handleDelete(id) {
      let that = this
      deleteAction(this.url.delete, { id }).then((res) => {
        if (res.success) {
          that.$message.success('删除成功')
          that.searchQuery(this.page, this.pageSize)
        } else {
          that.$message.error(res.message)
        }
      })
    },
    // 编辑逻辑
    handleEdit(val) {
      this.visible = true
      this.id = val.id
      this.num = 1
    },
    // 查看逻辑
    handleReview(val) {
      this.visible = true
      this.id = val.id
      this.num = 0
    },
    handlevisible(bool) {
      this.visible = bool
    },
  },
}
</script>
 
<style lang = "less" scoped>
/deep/.ant-table-tbody {
  background-color: #fff;
}
.ant-pagination {
  float: right;
}
</style>